<!-- 详情 -->
<template>
  <div class="fullW">
    <breadcrumb />

    <div class="needTitle brw pt-24px pb-24px">
      <div class="stateTag">
        <div
          class="state"
          :class="{ finished: detailData.status === 'FINISHED' }"
        >
          {{ filterEnum(detailData.status, needStatus) }}
        </div>
        <div class="des">
          <template v-if="detailData.status === 'UNDERWAY'"
            ><span>{{ detailData.expirationDays }}天</span>后 截止 |
          </template>
          <span>{{ detailData.participantCount }}次</span> 商家参与
        </div>
      </div>
      <div class="title">{{ detailData.title }}</div>
      <div class="type">需求类型：{{ detailData.serviceCategoryNameList?.join(',') }}</div>
      <div class="labels">
        <span>
          <i class="iconfont icon-time"></i>发布时间：{{
            detailData.createTime
          }}
        </span>
        <span>
          <i class="iconfont icon-time"></i>到期时间：{{
            detailData.cutoffDate
          }}
        </span>
      </div>
    </div>
    <div class="brw pt-24px pb-24px mt-16px needDetail">
      <div class="title">
        {{ detailData.title }}
      </div>
      <div class="copywriting">
        {{ detailData.detailDesc }}
      </div>
      <div class="flex justify-end mt-16px">
        <el-button type="primary" round @click="openOrderTaking"
          >我要承接</el-button
        >
      </div>
    </div>
    <div class="brw pt-24px pb-24px mt-16px">
      <div class="recordTitle">参与记录</div>
      <el-table
        :data="detailData.participationRecordList"
        size="default"
        header-row-class-name="useHead"
        style="width: 100%"
      >
        <el-table-column prop="acceptUserName" label="参与人" />
        <el-table-column prop="createTime" label="参与时间" />
      </el-table>
    </div>
  </div>

  <!-- 承接需求 -->
  <orderTaking ref="orderTakingRef" />
</template>
<script setup>
useHead({
  title: `需求列表-${appTitle}`,
});

definePageMeta({ title: "需求详情" });
let route = useRoute();
const user = useStore.user()

const orderTakingRef = ref();
const openOrderTaking = () => {
  if (!user.token) {
        ElMessageBox.confirm(`发布需求前请先登录，是否登录?`, "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            draggable: true,
            buttonSize: "default",
        }).then(async () => {
            user.login()
        })
    } else {
      orderTakingRef.value.show(detailData.value);
    }
};

const detailData = ref({});
const getDetail = () => {
  api
    .get(
      `/demand/front/${route.query.id}`,
      {},
      {
        loading: true,
      }
    )
    .then((res) => {
      detailData.value = res;
    });
};
onMounted(() => {
  getDetail();
});
</script>
<style scoped lang="scss">
.needTitle {
  .title {
    margin-top: 16px;
    line-height: 26px;
    font-size: 18px;
    font-weight: bold;
  }

  .type {
    font-size: 16px;
    line-height: 22px;
    margin-top: 8px;
  }

  .labels {
    padding-top: 10px;
    line-height: 22px;
    color: var(--use-color-info-light-3);

    span {
      margin-right: 20px;

      .iconfont {
        margin-right: 7px;
      }
    }
  }
}

.recordTitle {
  line-height: 52px;
  color: var(--use-color-info-light-2);
  font-size: 16px;
}

::v-deep(.useHead) {
  .el-table__cell {
    background-color: #f0f2f9 !important;
    color: var(--use-color-info-light-2);
  }
}

.needDetail {
  .copywriting {
    margin-top: 16px;
    line-height: 24px;
  }
}
</style>
